<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <th:block th:insert="~{include :: header('Supervisor list')}" />
</head>
<body class="gray-bg">
  <div class="container-div">
    <div class="btn-group-sm" id="toolbar" role="group">
      <a class="btn btn-success" onclick="publishOperationEvent()" shiro:hasPermission="disjob:supervisor:operate">
        <i class="fa fa-send"></i> 发布操作事件
      </a>
    </div>

    <div class="row">
      <div class="col-sm-12 select-table table-striped">
        <table id="bootstrap-table"></table>
      </div>
    </div>
  </div>

  <div th:insert="~{include :: footer}"></div>
  <th:block th:insert="~{include :: bootstrap-table-fixed-columns-js}" />

  <script th:inline="javascript">
    const prefix = ctx + "disjob/supervisor";

    $(function () {
      const options = {
        data: [[${list}]],
        sidePagination: "client",
        showSearch: false,
        showRefresh: false,
        showToggle: false,
        showColumns: false,
        fixedColumns: true,
        fixedNumber: 2,
        columns: [{
          field: 'host',
          title: 'Host',
          align: 'center'
        },
        {
          field: 'port',
          title: 'Port',
          align: 'center'
        },
        {
          field: 'responseTime',
          title: 'RT(ms)',
          align: 'center'
        },
        {
          field: 'alsoWorker',
          title: '是否同为Worker',
          formatter: function(value, row, index) {
            return value ? '<span class="badge badge-success">是</span>' : '<span class="badge badge-info">否</span>';
          }
        },
        {
          field: 'version',
          title: 'Version',
          cellStyle: function (value, row, index) {
            return { css: { "white-space": "nowrap" } }
          }
        },
        {
          field: 'startupTime',
          title: '启动时间',
          cellStyle: function (value, row, index) {
            return { css: { "white-space": "nowrap" } }
          }
        },
        {
          field: 'lastSubscribedEvent',
          title: '最近的订阅事件',
          cellStyle: function (value, row, index) {
            return { css: { "white-space": "nowrap" } }
          }
        }]
      };

      $.table.init(options);
    });

    function publishOperationEvent() {
      layer.open({
        type: 1,
        area: ['250px', '160px'],
        title: '发布操作事件',
        btn: ['确定', '取消'],
        content: '<select class="form-control"><option value="REFRESH_GROUP">Refresh group data</option></select>',
        skin: 'layui-layer-prompt',
        resize: false,
        success: function (layero, index) {
          layero.find('select').focus();
        },
        yes: function (index, layero) {
          const params = { "eventType": layero.find('select').val().trim() };
          $.operate.post(prefix + "/publish_operation_event", params, function (result) {
            if (result.code === 0) {
              location.reload();
              layer.close(index);
            }
          }, false);
        }
      });
    }
  </script>

</body>
</html>
